<template>
	<view class="container">
		<view class="class padding">
			<view class="class-item bg-white padding margin-top flex align-center" v-for="(item,index) in arr"
				:key="index" @tap="classDetail(item)">
				<view class="class-mes flex flex-direction align-center text-white text-bold justify-center" :class="'class-'+(index%4+1)">
					<!-- <text>{{item.add_time}}</text> -->
					<text class="margin-top-xss text-center">{{item.class_name?item.class_name:item.class.class_name}}</text>
				</view>
				<view class="class-mes2 flex flex-direction align-left margin-left">
					<text class="text-black text-bold">{{item.class_name?item.class_name:item.course_name}}</text>
					<text class="text-grey text-sm margin-top-xs">{{teacher_name?teacher_name:item.course_teacher_name}}</text>
				</view>
				<view class="cuIcon-right text-grey text-lg"></view>
			</view>
		</view>
		<view class="btn text-white text-center" v-if="is_teacher" @tap="showModal" data-target="Modal">创建班级</view>
		<view class="cu-modal bottom-modal" :class="modalName=='Modal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="" style="border-radius: 40rpx 40rpx 0 0;">
				<view class="con flex flex-direction align-center">
					<view class="title text-bold flex align-center">
						<text class="text-blue">-</text>
						<text class="text-black">创建班级</text>
						<text class="text-blue">-</text>
					</view>
					<view class="input">
						<input type="text" v-model="class_name" placeholder="请输入班级名称" />
					</view>
					<view class="commite base-color text-white text-center" @tap="createClass()">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import u from '@/utils/common.js'
	export default {
		data() {
			return {
				class_name: '',
				arr: [],
				image: "../../static/class_img_4.jpg",
				teacher_name: '',
				modalName: null,
				is_teacher: false
			}
		},
		onLoad() {
			console.log(getApp().globalData);
			if(getApp().globalData.teacher_info){
				this.is_teacher = true
				this.teacher_name = getApp().globalData.teacher_info.teacher_name
				this.getMyClass()
			}else if(getApp().globalData.course_teacher_info){
				this.is_teacher = false
				this.getCourseTeacherClass()
			}
		},
		methods: {
			getMyClass(){
				u.request({
					url: 'users/teacher/class_list',
					method: 'GET',
					success: res =>{
						console.log(res);
						this.arr = res.result.list
					},
					fail: err=>{
						console.log(err);
					}
				})
			},
			getCourseTeacherClass(){
				u.request({
					url: 'users/course_teacher/class_list',
					method: 'GET',
					success: res =>{
						console.log(res);
						this.arr = res.result.list
					},
					fail: err=>{
						console.log(err);
					}
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			createClass(){
				if(!this.class_name){
					uni.showToast({
						title: '请输入班级名称',
						icon: 'none'
					});
					return
				}
				u.request({
					url: 'users/class/create',
					method: 'POST',
					data:{
						class_name: this.class_name
					},
					success: res =>{;
						uni.showToast({
							title: '创建成功',
							icon: 'none',
							success: () => {
								this.modalName = null
								this.getMyClass()	
							}
						});	
					},
					fail: err =>{
						console.log(err);
					}
					
				})
			},
			classDetail(item) {
				uni.navigateTo({
					url: './class-detail?class_id='+item.class_id,
					fail: (err) => {
						console.log(err);
					}
				});
				// if(this.is_teacher){
				// 	getApp().globalData.class_info = item
				// 	getApp().globalData.class_id = item.class_id
				// 	uni.navigateBack({
				// 		delta: 1
				// 	});
				// }else{
				// 	uni.navigateTo({
				// 		url: './class-detail?class_id='+item.class_id,
				// 		fail: (err) => {
				// 			console.log(err);
				// 		}
				// 	});
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.class-1{
		background: url(../../static/class_img_1.jpg);
	}
	.class-2{
		background: url(../../static/class_img_2.jpg);
	}
	.class-3{
		background: url(../../static/class_img_3.jpg);
	}
	.class-4{
		background: url(../../static/class_img_4.jpg);
	}
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		margin-top: -30rpx;
	}

	.class-item {
		height: 200rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 3rpx #f5f5f5;

		.class-mes {
			height: 140rpx;
			width: 210rpx;
			background-size: cover;
			border-radius: 12rpx;
		}

		.class-mes2 {
			flex: 1 1 0;
		}
	}

	.btn {
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: #2982ff;
		margin: 50rpx 75rpx;
		// position: absolute;
		// bottom: 95rpx;
		// left: 75rpx;
	}

	.con {
		height: 500rpx;

		.title {
			width: 200rpx;
			margin-top: 38rpx;
			justify-content: space-around;
		}

		.input {
			margin-top: 128rpx;

			input {
				width: 500rpx;
				height: 75rpx;
				border-radius: 10rpx;
				border: 1rpx solid #f1e1e1;
			}
		}

		.commite {
			width: 204rpx;
			height: 70rpx;
			line-height: 70rpx;
			margin-top: 42rpx;
			border-radius: 40rpx;
		}
	}

	.base-color {
		background-color: #418fff;
	}
</style>
